<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
            <title>
                layui模板
            </title>
            <link href="../img/home.png" rel="icon" sizes="120x120" type="image/png">
                <link href="../../layui/dist/css/layui.css" rel="stylesheet" type="text/css">
                </link>
            </link>
        </meta>
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
            <!-- 顶部菜单 -->
            <div class="layui-header">
            </div>
            <!-- 侧边栏 -->
            <div class="layui-side layui-bg-black">
            </div>
            <!-- 右侧快 -->
            <div class="layui-body">
                <!-- 数据模块 -->
                <table id="demo" lay-filter="test">
                </table>
                <script id="barDemo" type="text/html">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
        </div>
    </body>
</html>
<script src="../../layui/dist/layui.js">
</script>
<script src="../../jquery-3.4.1/jquery-3.4.1.min.js">
</script>
<script>
    $(".layui-header").load("header.html");
    $(".layui-side").load("side.html");
</script>
<script>
    layui.use('element', function() {
        var element = layui.element;
    });

    //监听表单提交
    layui.use('table', function() {
        // var layer = layui.layer;
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            // ,url: '/demo/table/user/' //数据接口
            ,url: '../data/data1.json' //数据接口
            ,url: '/myCode/admin/index.php' //数据接口
            ,page: true //开启分页
            ,limit: 3

            ,cols: [[ //表头
              {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
              ,{field: 'username', title: '用户名', width:80}
              ,{field: 'sex', title: '性别', width:80, sort: true}
              ,{field: 'city', title: '城市', width:80} 
              ,{field: 'sign', title: '签名', width: 177}
              ,{field: 'experience', title: '积分', width: 80, sort: true}
              ,{field: 'score', title: '评分', width: 80, sort: true}
              ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
        });
    });
</script>
